<template>
  <div id="app">
    <!-- {{ unSelectAttr }} -->
    <el-form label-width="80px" :model="spu">
      <!-- SPU名称 -->
      <el-form-item label="SPU名称">
        <el-input placeholder="SPU名称" v-model="spu.spuName"></el-input>
      </el-form-item>
      <!-- 品牌 -->
      <el-form-item label="品牌">
        <el-select placeholder="请选择品牌" v-model="spu.tmId">
          <!-- 
            label是显示的名称
            value要收集的字段
          -->
          <el-option
            :label="item.tmName"
            :value="item.id"
            v-for="item in trademarkList"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- SPU描述 -->
      <el-form-item label="SPU描述">
        <el-input
          type="textarea"
          placeholder="描述"
          v-model="spu.description"
        ></el-input>
      </el-form-item>
      <!-- SPU图片 -->
      <el-form-item label="SPU图片">
        <!-- 
          list-type:上传的类型
          on-preview：点击查看
          on-remove：点击删除
          file-list：上传的列表 参数必须是 name和url
        -->
        <el-upload
          action="dev-api/admin/product/fileUpload"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :file-list="imageList"
          :on-success="handleSuccess"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>
      </el-form-item>
      <!-- 销售属性 -->
      <el-form-item label="销售属性">
        <el-select
          :placeholder="`还有${unSelectAttr.length}个未选择`"
          v-model="attrIdandName"
        >
          <el-option
            :value="`${item.id}:${item.name}`"
            :label="item.name"
            v-for="item in unSelectAttr"
            :key="item.id"
          ></el-option>
        </el-select>
        <el-button
          type="primary"
          icon="el-icon-plus"
          :disabled="attrIdandName ? false : true"
          @click="addSaleAttr"
          >添加销售属性</el-button
        >
        <!-- 表格 -->
        <el-table border :data="spu.spuSaleAttrList">
          <el-table-column
            label="序号"
            type="index"
            width="80px"
            align="center"
          ></el-table-column>
          <el-table-column
            label="属性名"
            prop="saleAttrName"
            width="200px"
          ></el-table-column>
          <el-table-column label="属性值名称列表" width="width">
            <template slot-scope="{ row }">
              <!-- {{ row.spuSaleAttrValueList }} -->
              <!--  @close="handleClose(tag)" -->
              <el-tag
                :key="tag.id"
                v-for="(tag, index) in row.spuSaleAttrValueList"
                closable
                :disable-transitions="false"
                @close="row.spuSaleAttrValueList.splice(index, 1)"
                >{{ tag.saleAttrValueName }}</el-tag
              >
              <!--  
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
              -->
              <el-input
                class="input-new-tag"
                @keyup.enter.native="handleInputConfirm(row)"
                @blur="handleInputConfirm(row)"
                v-if="row.inputVisible"
                v-model="row.inputValue"
                ref="saveTagInput"
                size="small"
              ></el-input>
              <!--  @click="showInput" -->
              <el-button
                v-else
                class="button-new-tag"
                size="small"
                @click="addSale(row)"
                >添加</el-button
              >
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{ row, $index }">
              <el-button
                type="danger"
                size="mini"
                @click="spu.spuSaleAttrList.splice($index, 1)"
              >
                删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <!-- 保存取消按钮 -->
      <el-form-item label>
        <el-button
          type="primary"
          @click="addorupdatespu"
          :disabled="spu.spuName ? false : true"
          >保存</el-button
        >
        <el-button type @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
// 获取到请求的api
import {
  getSpuImg,
  getSpu,
  getTmList,
  getBaseList,
  postAddorupdatespu,
} from "@/api/product/spu";
export default {
  name: "addSPU",
  data() {
    return {
      dialogImageUrl: "", //图片的url
      dialogVisible: false, //是否显示图片
      /* 
      spu属性初始化的时候是一个空对象，在修改SPU的时候，会向服务器发送请求，返回SPU的信息，在修改的时候可以利用服务器返回的这个对象收集最新的数据提交给服务器
      如果是添加的话是不发送请求的，那数据收集到哪里呀？收集那些字段呢？看文档
      */
      // 存放spu的信息属性
      spu: {
        // 三级的id
        category3Id: 0,
        // 描述
        description: "",
        // 品牌的id
        tmId: "",
        // spu名称
        spuName: "",
        // 图片列表
        spuImageList: [
          // {
          //   id: 0,
          //   imgName: "string",
          //   imgUrl: "string",
          //   spuId: 0
          // }
        ],
        // 销售属性
        spuSaleAttrList: [
          // {
          //   baseSaleAttrId: 0,
          //   id: 0,
          //   saleAttrName: "string",
          //   spuId: 0,
          //   spuSaleAttrValueList: [
          //     {
          //       baseSaleAttrId: 0,
          //       id: 0,
          //       isChecked: "string",
          //       saleAttrName: "string",
          //       saleAttrValueName: "string",
          //       spuId: 0
          //     }
          //   ]
          // }
        ],
      },
      // 所有品牌的数据
      trademarkList: [],
      // 所有图片
      imageList: [],
      // 销售属性
      baseSaleAttrLis: [],
      inputValue: "", //属性表格的tag
      // inputVisible:false,
      // 属性id 和 属性名
      attrIdandName: "",
    };
  },
  mounted() {},
  methods: {
    // 照片删除的时候
    handleRemove(file, fileList) {
      // console.log(file, fileList);
      // file是当前删除的文件 filelist是删除剩下的图片
      this.imageList = fileList;
    },
    // 照片墙查看
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 上传新的图片成功
    handleSuccess(response, file, fileList) {
      console.log(response);
      console.log(file);
      console.log(fileList);
      // file 是上传的文件 fileList是全部图片的列表
      this.imageList = fileList;
    },
    // 获取到spu的数据 在这里发送请求
    async initSpu(row) {
      // console.log("发送请求", row);
      // 获取spu的信息
      let spu = await getSpu(row.id);
      if (spu.code == 200) {
        this.spu = spu.data;
      }
      // 获取品牌的信息
      let tmres = await getTmList();
      if (tmres.code == 200) {
        console.log(tmres);
        this.trademarkList = tmres.data;
      }
      // 获取spu的图片
      let imgList = await getSpuImg(row.id);
      if (imgList.code == 200) {
        console.log(imgList);
        /* 
        因为upload上传图片他的格式是要img和url 而后端返回的是imgName
        imgUrl 我们先修改然后在赋值
        foreach是会修改原数组的
        */
        // this.imageList = imgList.data;
        let imgarr = imgList.data;
        imgarr.forEach((item) => {
          item.url = item.imgUrl;
          item.name = item.imgName;
        });
        this.imageList = imgarr;
      }
      // 获取全部的销售属性
      let baseRes = await getBaseList(row.id);
      if (baseRes.code == 200) {
        console.log(baseRes);
        this.baseSaleAttrLis = baseRes.data;
      }
    },
    // 添加销售属性
    addSaleAttr() {
      /* 
      要收集 baseSaleAttrId 属性的id
      saleAttrName          属性的名字
      spuSaleAttrValueList  属性值的列表
      */
      // console.log(this.attrIdandName);
      // 把attrIdandName进行分割开 拿到我们需要的数据 把他们添加到 spu的spuSaleAttrList中
      let [baseSaleAttrId, saleAttrName] = this.attrIdandName.split(":");
      // console.log(baseSaleAttrId,saleAttrName);
      let newSale = {
        baseSaleAttrId,
        saleAttrName,
        spuSaleAttrValueList: [],
      };
      this.spu.spuSaleAttrList.push(newSale);
      this.attrIdandName = "";
    },
    // 添加属性值
    addSale(row) {
      // console.log(row);
      // 我们添加得时候给 inputVisible 设置成true
      this.$set(row, "inputVisible", true);
      // 这个是收集得input数据
      this.$set(row, "inputValue", "");
      console.log(row);
    },
    // 当输入框失去焦点得时候
    handleInputConfirm(row) {
      // 需要收集得数据  saleAttrValueName baseSaleAttrId
      // 解构出销售属性中收集得数据
      let { inputValue, baseSaleAttrId } = row;

      /* 
      判断是不是重复 是不是空值
      */
      if (inputValue.trim() == "") {
        this.$message("请输入正常的属性值");
        return;
      }
      let res = row.spuSaleAttrValueList.every((item) => {
        return item.saleAttrValueName != inputValue;
      });
      console.log(res);
      if (res) {
        // 新增得销售属性值
        let newSaleAttrValue = {
          baseSaleAttrId,
          saleAttrValueName: inputValue,
        };
        row.spuSaleAttrValueList.push(newSaleAttrValue);

        // 隐藏输入框
        row.inputVisible = false;
      } else {
        this.$message.error("已经有这个值了,不要重复输入哈");
        return;
      }
    },
    // 点击保存的时候
    async addorupdatespu() {
      // 我们要先整理一下照片墙的数据
      // alert(1);
      this.spu.spuImageList = this.imageList.map((item) => {
        return {
          imgName: item.name,
          imgUrl: (item.response && item.response.data) || item.url,
        };
      });
      // 接口postAddorupdatespu
      let res = await postAddorupdatespu(this.spu);
      console.log(res);
      if (res.code == 200) {
        this.$message.success("保存成功");
        // 修改场景 因为我们要判断如果是添加就返回第一页数据 如果是修改就返回当前页数据 所以传数据的时候要添加两个值
        this.$emit("fanhui", { num: 0, flag: this.spu.id ? "修改" : "添加" });
        Object.assign(this._data, this.$options.data());
      }
    },
    // 添加的时候我们要收集数据和请求数据
    async addSpu(id) {
      // 获取品牌的信息
      let tmres = await getTmList();
      if (tmres.code == 200) {
        console.log(tmres);
        this.trademarkList = tmres.data;
      }
      // 获取全部的销售属性
      let baseRes = await getBaseList(id);
      if (baseRes.code == 200) {
        console.log(baseRes);
        this.baseSaleAttrLis = baseRes.data;
      }
      this.spu.category3Id = id;
    },
    // 当我们点击取消的时候
    cancel() {
      this.$emit("fanhui", { num: 0, flag: "" });
      Object.assign(this._data, this.$options.data());
    },
  },
  // 计算属性
  computed: {
    // 计算销售属性
    unSelectAttr() {
      /* 
    计算销售属性 一共有三个销售属性 颜色、版本、尺码 存放在baseSaleAttrLis

    当前SPU拥有的属于自己的销售属性SPU.spuSaleAttrList
    利用数组的过滤
    */
      let res = this.baseSaleAttrLis.filter((item) => {
        console.log(item);
        return this.spu.spuSaleAttrList.every((item1) => {
          return item.name != item1.saleAttrName;
          // console.log(item1);
        });
      });
      return res;
    },
  },
};
</script>
<style>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
